/* 
获取指定页码的列表
*/

import render from './index.art'
import { reqGetUsers, reqLogout, reqDeleteUser } from '../../api'
import { getUser, removeToken, removeUser } from '../../utils/storageUtils'


async function getUsers (page) {

  // 每页五条数据 limit 也可以叫 pagesize
  const limit = 5
  // 请求获取指定的分页数据
  const result = await reqGetUsers(page, limit)
  // 取出总数量和当前页的用户数组
  const { users, total } = result.data
  // 计算出页码数
  const pageCount = Math.ceil(total / limit)

  // 得到登陆用户的用户名
  const { username } = getUser()
  // 渲染art模板 生成html
  const html = render({ users, page, pageCount, total, username })
  // 渲染到页面
  document.getElementById('app').innerHTML = html
  // 点击退出
  handleClickLogout()
  // 处理点击删除
  handleClickDelete(page)



  console.log(document.getElementById('logout'));
  console.log(document.getElementById('Addbtn'));

}
// 添加到window上 模板可以直接调用
window.getUsers = getUsers
getUsers(1) // 默认展示第一页

// 处理点击退出
function handleClickLogout () {
  document.getElementById('logout').onclick = async () => {
    // 请求退出接口
    await reqLogout()
    // 清除保存的token
    removeToken()
    // 清除保存的user
    removeUser()
    // 成功后 跳转到登录页面
    window.location = '/login.html'
  }
}

// 处理点击删除
function handleClickDelete (page) {
  document.getElementsByName('deleteBtn').forEach(btn => {
    btn.onclick = async (e) => {
      // 得到标签上的data自定义属性
      const { id, username } = e.target.dataset
      // 显示确定框
      if (window.confirm(`确定删除 ${username} 吗?`)) {
        // 请求删除
        await reqDeleteUser(id)
        // 成功后, 重新获取列表显示
        getUsers(page)
      }
    }
  })
}




/* 
这里注意 直接用dom获取元素 是获取不到的  因为页面是art渲染的  只能在页面渲染完成后才能获取到
*/
// document.getElementById('Addbtn').onclick = () => {
//   console.log(1);
//   window.location = '/userAdd.html'
// }




